<template>
  <div>
     <h1>分类组件第一个子组件</h1>
     <input type="text" placeholder="第一个组件输入框">
     <h1>Bilili热搜榜</h1>
     <div class="list_one" v-for="item  in blist"
     :key="item.heat">
         <a :href="item.link"><h1>{{item.title}}</h1></a>
         <h1>播放量:{{item.heat}}</h1>
     </div>
  </div>
</template>
<script>
export default {
   // 被缓存的组件首次进入触发前四生命周期 和activated 
   // 第二次进入 只触发activated 组件的激活 
   // 离开组件不触发beforeDestroy destroyed
   // 离开触发deactivated 组件失活

   // keep-alive产生俩个新的生命周期
   // activated 组件的激活 
   // deactivated 组件的失活
   name:"cateone",
   // 首次进入组件触发哪几个生命周期
   beforeCreate() {
       console.log("创建前");
   },
   created(){
      console.log("创建后");
      this.getRain(); //获取b站热搜榜
   },
   beforeMount() {
         console.log("挂载前");
   },
   mounted(){
         console.log("挂载后");
   },
   activated() { //被缓存的组件 第二次进入触发激活
      console.log("组件激活了");
      // 场景：首次进入就调用的接口 放在created和activated中都要调用
      // 有缓存的组件 在activated调用created中初始化的接口 

       this.getRain(); //获取b站热搜榜
   },
   data(){
      return {
        blist:[]//b站热搜榜
      }
   },
   methods:{
      getRain(){ //获取b站热搜榜
        
         this.$axios({
            url:"/api/bilibili-rs/ ",
            method:"get"
         }).then(res=>{
            console.log(res,"B站排行------")
            this.blist=res.data.data;
            console.log(this.blist,"b站热搜榜")
         })
      }
   },
   deactivated() {
      console.log("组件失活了");
   },
}
</script>
<style lang="scss">
      .list_one{
         background: skyblue;
         margin-top: 20px;
         display: flex;
      }
</style>